<template>
	<view class="page">
		<view class="title">
			注册
		</view>
		
		<u--form :model="form" :rules="rules" ref="formRef" style="margin-top: 80rpx;">
			<u-form-item prop="userName">
				<u--input class="input"   v-model="form.userName"  placeholder="请输入注册账号" prefixIcon="list" prefixIconStyle="font-size: 22px;color: #909399">
				</u--input>
			</u-form-item>
			
			<u-form-item prop="nickName">
				<u--input class="input"   v-model="form.nickName"  prefixIcon="list" prefixIconStyle="font-size: 22px;color: #909399"  placeholder="请输入姓名"></u--input>
			</u-form-item>
			
			<u-form-item prop="phonenumber">
				<u--input class="input"   v-model="form.phonenumber"  prefixIcon="list" prefixIconStyle="font-size: 22px;color: #909399"  placeholder="请输入手机号"></u--input>
			</u-form-item>
			
			<u-form-item prop="email">
				<u--input class="input"   v-model="form.email"  prefixIcon="list" prefixIconStyle="font-size: 22px;color: #909399"  placeholder="请输入邮箱"></u--input>
			</u-form-item>
			
			<u-form-item prop="password">
				<u--input class="input"   v-model="form.password" :password="true" placeholder="登录密码" prefixIcon="list" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
			</u-form-item>
			
			<u-form-item prop="RepeatPassword">
				<u--input class="input"  v-model="form.RepeatPassword" :password="true" placeholder="重复登录密码" prefixIcon="list" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
			</u-form-item>
		</u--form>
		
		<view class="btn">
			<up-button color="#555555" text="注册" size="large" style="border-radius: 100rpx;"  @click="Repeat"></up-button>
		</view>
		
		<view class="bottom">
			<u-radio-group v-model="userAgreement" size="30" iconSize="20">
				<u-radio :name="true" shape="circle"></u-radio>
				<span>已阅读同意</span>
				<span class="Agreement">《用户服务协议》</span>和
				<span class="Agreement">《隐私政策》</span>
			</u-radio-group>
		</view>
		
		<u-toast ref="uToasts"></u-toast>
	</view>
	
</template>

<script>
	import {register} from '@/config/api/user.js'
	export default{
		data() {
			return{
				form:{
					userName:"",
					nickName:"",
					phonenumber:'',
					email:'',
					password:'',
					RepeatPassword:''
				},
				
				userAgreement:"",
				
				rules:{
					userName:[
						{
							required:true,
							message:"请输入注册账号",
							trigger: ['blur', 'change']
						},
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字',
							trigger: ['blur', 'change']
						},
						{
							max: 12,
							message: '长度最多12个字符',
							trigger: ['blur', 'change']
						}
					],
					nickName:[
						{
							required:true,
							message:"请输入姓名",
							trigger: ['blur', 'change']
						},
						{
							max: 12,
							message: '长度最多12个字符',
							trigger: ['blur', 'change']
						}
					],
					phonenumber:[
						{
							required:true,
							message:"请输入手机号",
							trigger: ['blur', 'change']
						},
						{
							pattern: /^(13|15|17|18)[0-9]{9}$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '手机号不合法',
							trigger: ['blur', 'change']
						}
					],
					email:[
						{
							required:true,
							message:"请输入邮箱",
							trigger:['blur','change']
						},
						{
							pattern:/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
							transform(value) {
								return String(value);
							},
							message: '邮箱不合法',
							trigger: ['blur', 'change']
						}
					],
					password:[
						{
							required:true,
							message:"请输入密码",
							trigger:['blur']
						},
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字',
							trigger: ['blur', 'change']
						},
						// 6-10个字符之间的判断
						{
							min:6,
							max: 10,
							message: '长度在6-10个字符之间',
							trigger: ['blur', 'change']
						},
					],
					RepeatPassword:[
						{
							required:true,
							message:"请输入密码",
							trigger:['blur']
						},
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字',
							trigger: ['blur', 'change']
						},
						// 6-10个字符之间的判断
						{
							min:6,
							max: 10,
							message: '长度在6-10个字符之间',
							trigger: ['blur', 'change']
						},
					]
				},
			}
		},
		
		methods:{
			Repeat(){
				if(this.userAgreement){
					this.$refs.formRef.validate().then(res=>{
						if(this.form.password != this.form.RepeatPassword){
							uToasts.value.show({
								message:"俩次输入的密码不一致"
							})
							return
						}
						register(this.form).then(regRes=>{
							if(regRes.code == 200){
								this.$refs.uToasts.show({
									message:"注册成功"
								})
								let that = this
								setTimeout(function(){
									that.goLogin()
								},2000)
							}
						})
					}).catch(errors=>{
						console.log(errors);
						this.$refs.uToasts.show({
							message:"校验失败，请根据提示完成校验!"
						})
					})
				}else{
					this.$refs.uToasts.show({
						message: "请先勾选用户服务协议"
					})
				}
				
			},
			
			goLogin(){
				uni.redirectTo({
					url: '/pages/login/login'
				});
			
			}
		}
	}
</script>

<style scoped>
	.page{
		padding: 15% 5% 5% 5%;
	}
	
	.title{
		font-weight: 700;
		font-size: 50rpx;
	}
	
	/* 登录按钮组 */
	.btn{
		text-align: center;
		margin-top: 15%;
	}
	
	.input{
		border: 1px solid #E5E6E8;
		height: 60rpx;
		border-radius: 10rpx;
	}
	
	/* 底部 */
	.bottom{
		position: fixed;
		bottom: 40rpx;
	}
	
	.Agreement{
		border-bottom: 1px solid black;
	}
</style>
